<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="box1">
   
     <el-form ref="ruleFormRef"  :model="ruleForm" status-icon :rules="rules" label-width="auto"
        class="demo-ruleForm">
        <el-form-item label="用户名:" prop="username">
            <el-input v-model="ruleForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮&emsp;箱:" prop="email">
            <el-input v-model="ruleForm.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密&emsp;码:" prop="password">
            <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item class="set">
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                登录
            </el-button>
            
        </el-form-item>
        </el-form>
        <div class="GoSign">
             <span class="sign"><a href="/forget" >忘记密码?</a><span>暂无账号?<a href="/sign" >立即注册</a></span> </span>
        </div>
    </div>
        
        
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { login } from '@/api';
import router from '@/router';
const ruleFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('不能为空'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    
    username: '',
    password: '',
    email:""
})

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: validatePass, trigger: 'blur' }],
    email: [{ validator: validatePass, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],

})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {

            let params={
                username:ruleForm.username,
                email:ruleForm.email,
                password:ruleForm.password
            }
            login(params).then(res=>{
                console.log(res,1111111)
                if(res.data.code===200)
                {
                   
                    ElMessage({
                    message: res.data.msg,
                     type: 'success',
                })
                     //存储token
                     
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('user', ruleForm.username)
                setTimeout(() => {
            
                    router.push('/home')
                }, 500)
                }else{
                 ElMessage({
                    message: '登录失败',
                    type: 'error',
                })
                }
            })
           

        } else {
            console.log('登录失败!')
        }
    })
}


</script>
<style scoped lang="scss">
.box1{
    width: 100%;
 
   
}
.demo-ruleForm{
    width: 80%;
    height: 200px;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    margin: 0 auto;
}
.set{
 margin-left: 20px;
    button{
        width: 90%;
    }
}
.GoSign{
    width: 100%;
   
     color: #fff;
}
.sign{
   
     display: flex;
    list-style: none; 
   
    justify-content: space-around;
    a{
        color: #fff;
    }
}
</style>